---
title: Eventos OnDrag
description: Una guía de como usar Fluid DnD llamando los eventos onDragStart y onDragEnd.
---

import OnDragEvents from "@/components/vue/OnDragEvents.vue";
import OnDragEventsWithMoreInfo from "@/components/vue/OnDragEventsWithMoreInfo.vue"
import { Code, Aside } from "@astrojs/starlight/components";

### Ejemplo de lista de números

Con **Fluid DnD** puedes crear eventos que se lancen cuando empiezas arrastrar un elemento (`onDragStart`) o cuando lo sueltas (`onDragEnd`).\
Crearemos un grupo de listas y añadimos los eventos `onDragStart` y `onDragEnd` que alternan la clase `marked-droppable` en los **droppables** usando una referencia al padre de estos (`droppableGroup`):

export const highlightsListOfNumbers = ["onDragStart", "onDragEnd"];

export const listOfNumbers = `<script setup lang="ts">
...
const droppableGroup = useTemplateRef('droppableGroup')
function onDragStart(){
  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}
function onDragEnd (){
  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}

const list1 = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
  onDragStart,
  onDragEnd,
});
...
const list2 = ref([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
  onDragStart,
  onDragEnd,
});
</script>`;

<Code code={listOfNumbers} lang="vue" mark={highlightsListOfNumbers} />

### Creando la vista

Después, crearemos dos listas en la vista y pasamos la referencia `droppableGroup`:

export const listOfNumbersDraggable = `
<template>
  <div ref="droppableGroup" class="group-list">
    <ul ref="parent1" class="number-list">
        <!-- ... -->
    </ul>
    <div ref="parent2" class="number-list-h">
        <!-- ... -->
    </div>
  </div>
</template>
<style>
 ...
</style>
`;

export const highlightsDraggable = ["droppableGroup"];

<Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />


### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <OnDragEvents client:load  />
</div>

### Uso de los parámetros de eventos onDrag

Puedes usar los eventos `onDragStart` y `onDragEnd` para obtener más información sobre el proceso de arrastre.
Por ejemplo, puedes obtener el valor (`value`) del elemento que se está arrastrando y el valor (`value`) del último elemento que se soltó.
<Aside type="note">También puedes obtener el valor del atributo `index` de `DragEndEventData` y `DragStartEventData`.</Aside>

export const onDragParams = `<script setup lang="ts">
import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";
//...
const draggedElement = ref<number | undefined>(undefined)
const lastDroppedElement = ref<number | undefined>(undefined)
function onDragStart(data: DragStartEventData<number>){
  draggedElement.value = data.value;
  //...
}
function onDragEnd (data: DragEndEventData<number>){
  lastDroppedElement.value = data.value;
  //...
}
//...
</script>`;
export const highlightsOnDragParams = ["draggedElement", "lastDroppedElement", "data", "DragEndEventData", "DragStartEventData","data.value"];

<Code code={onDragParams} lang="vue" mark={highlightsOnDragParams} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <OnDragEventsWithMoreInfo client:load  />
</div>
